<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, reactive, ref, watch } = Vue;

      /*
      setup 中调用侦听器，会自动绑定到宿主组件实例上。宿主组件卸载时自动停止。
      步回调创建一个侦听器，不会绑定到当前组件上，必须手动停止它，以防内存泄漏。
      */
      const app = createApp({
        setup() {
          // 它会自动停止
          watchEffect(() => {});

          // ...这个则不会！
          setTimeout(() => {
            watchEffect(() => {});
          }, 100);

          // 手动停止一个侦听器，调用 watch 或 watchEffect 返回的函数：
          setTimeout(() => {
            const unwatch = watchEffect(() => {});
            // code
            // ...
            // ...
            // 当该侦听器不再需要时
            unwatch();
          }, 100);

          // 最佳实践来说：不要编写异步侦听器，可以使用条件式的侦听逻辑：
          // 需要异步请求得到的数据
          const data = ref(null);

          watchEffect(() => {
            if (data.value) {
              // 数据加载后执行某些操作...
            }
          });
          return {};
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
